<template>
  <div class="subjectpagecontainer">
    <!-- 搜索框-->
    <el-row>
      <el-col :span="12">
        <el-input
          style="width:55%"
          placeholder="请输入类别名称"
          v-model="searchText"
          class="input-with-select"
        >
          <el-button @click="searchCourse" slot="append" class="btn_user_defined">
            查询
            <i class="el-icon-search el-icon--right"></i>
          </el-button>
        </el-input>
      </el-col>
      <el-col :span="12">
        <div class="toRight">
          <el-button @click="addCourse" type="primary btn_add_defined" icon="el-icon-plus" plain></el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 列表-->
    <el-row style="margin-top:.2rem;">
      <template>
        <el-table
          :data="subjectList"
          @cell-click="editorBtn"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column align="center" label="序号" width="100">
            <template slot-scope="scope">{{scope.$index+1}}</template>
          </el-table-column>
          <el-table-column prop="name" align="center" label="名称" width="180"></el-table-column>
          <el-table-column prop="color" align="center" label="颜色" width="150">
            <template slot-scope="scope">
              <div class="colorbox" :style="{background:subjectList[scope.$index].color}"></div>
            </template>
          </el-table-column>
          <el-table-column prop="imgurl" align="center" label="图片" width="150">
            <template slot-scope="scope">
              <img :src="subjectList[scope.$index].imgurl" height="20" width="20">
            </template>
          </el-table-column>
          <el-table-column prop="classify" align="center" label="分类" width="150"></el-table-column>
          <el-table-column prop="subsidiaryOrgan" align="center" label="所属机构" width="200"></el-table-column>
          <el-table-column prop="creationTime" align="center" label="创建时间" width="100"></el-table-column>
          <el-table-column prop="sort" align="center" label="排序" width="150"></el-table-column>
          <el-table-column prop="mark" align="center" label="备注" width="100"></el-table-column>
          <el-table-column prop="operate" align="center" column-key="btn" label="操作">
            <template slot-scope="scope">
              <span class="btn_editor">
                <i class="el-icon-edit"></i>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-row>
    <!--分页-->
    <el-row style="margin-top:.2rem;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="changePage"
      ></el-pagination>
    </el-row>
    <!--弹出对话框-->
    <el-dialog
      title="修改科目"
      :visible.sync="boxshow"
      width="30%"
      custom-class="el-dialog-bg"
      :before-close="handleClose"
    >
      <div class="content-box">
        <div class="licls">
          <div class="three-input">
            <input type="text" placeholder="科目名称" class="inputbox">
          </div>
          <div class="three-input">
            <div style="height: 50%;line-height: 150%;">课程类型</div>
            <div style="height: 50%;line-height: 150%;">
              <i class="el-icon-menu"></i>
              <span>托管</span>
            </div>
          </div>
          <div class="three-input">
            <el-color-picker v-model="defaultcolor"></el-color-picker>
            <div style="font-size:0.1rem;">{{defaultcolor}}</div>
          </div>
        </div>
        <div class="licls">
          <div class="three-input">
            <div
              style="font-size:.1rem;height: .2rem;line-height: .2rem;width:100%;text-align: left;"
            >年龄范围</div>
            <div class="input-container">
              <div class="input-text">
                <input type="text">
              </div>
              <div class="input-text">至</div>
              <div class="input-text">
                <input type="text">
              </div>
            </div>
          </div>
          <div class="three-input">
            <div @click="selectradio(obj)" class="selectradio uncheck"></div>
            <span style="float:left;padding-top:.13rem;padding-left:.1rem;">前端显示</span>
          </div>
          <div class="three-input">
            <div
              style="font-size:.1rem;height: .2rem;line-height: .2rem;width:100%;text-align: left;"
            >排序</div>
            <div class="input-container">
              <div class="input-text" style="width:100%;">
                <input type="text">
              </div>
            </div>
          </div>
        </div>
        <div class="licls">
          <div class="summary">
            <input type="text" class="inputbox" placeholder="简介">
          </div>
          <div class="imgcontainer">
            <div class="imgtext">图片</div>
            <div class="imgcontent" @click="editorImage">
              <img :src="imgsrc">
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="boxshow = false">取 消</el-button>
        <el-button type="primary" @click="boxshow = false">保存</el-button>
      </span>
    </el-dialog>
    <!--裁剪图片组件-->
    <imgplugins></imgplugins>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import imgplugins from "../common/cutImage_plugin";
export default {
  data() {
    return {
      searchText: "", //搜索框输入文本
      subjectList: [
        {
          name: "数学",
          color: "orange",
          imgurl: "../../../static/img/baowahead.png",
          classify: "长期",
          subsidiaryOrgan: "威创测试机构",
          creationTime: "2019-03-12",
          sort: "1",
          mark: "无"
        }
      ],
      selectItem: [], //存放选中的数据
      total: 100,
      boxshow: false,
      defaultcolor: "#FC5E24",
      selectshow: false
    };
  },
  components: {
    imgplugins
  },
  methods: {
    /**
     * 初始化数据
     */
    initData() {
      this.subjectList = [
        {
          name: "数学",
          color: "orange",
          imgurl: "../../../static/img/baowahead.png",
          classify: "长期",
          subsidiaryOrgan: "威创测试机构",
          creationTime: "2019-03-12",
          sort: "1",
          mark: "无"
        },
        {
          name: "数学",
          color: "orange",
          imgurl: "../../../static/img/baowahead.png",
          classify: "长期",
          subsidiaryOrgan: "威创测试机构",
          creationTime: "2019-03-12",
          sort: "1",
          mark: "无"
        },
        {
          name: "数学",
          color: "orange",
          imgurl: "../../../static/img/baowahead.png",
          classify: "长期",
          subsidiaryOrgan: "威创测试机构",
          creationTime: "2019-03-12",
          sort: "1",
          mark: "无"
        },
        {
          name: "数学",
          color: "orange",
          imgurl: "../../../static/img/baowahead.png",
          classify: "长期",
          subsidiaryOrgan: "威创测试机构",
          creationTime: "2019-03-12",
          sort: "1",
          mark: "无"
        },
        {
          name: "数学",
          color: "orange",
          imgurl: "../../../static/img/baowahead.png",
          classify: "长期",
          subsidiaryOrgan: "威创测试机构",
          creationTime: "2019-03-12",
          sort: "1",
          mark: "无"
        },
        {
          name: "数学",
          color: "orange",
          imgurl: "../../../static/img/baowahead.png",
          classify: "长期",
          subsidiaryOrgan: "威创测试机构",
          creationTime: "2019-03-12",
          sort: "1",
          mark: "无"
        },
        {
          name: "数学",
          color: "orange",
          imgurl: "../../../static/img/baowahead.png",
          classify: "长期",
          subsidiaryOrgan: "威创测试机构",
          creationTime: "2019-03-12",
          sort: "1",
          mark: "无"
        },
        {
          name: "数学",
          color: "orange",
          imgurl: "../../../static/img/baowahead.png",
          classify: "长期",
          subsidiaryOrgan: "威创测试机构",
          creationTime: "2019-03-12",
          sort: "1",
          mark: "无"
        },
        {
          name: "数学",
          color: "orange",
          imgurl: "../../../static/img/baowahead.png",
          classify: "长期",
          subsidiaryOrgan: "威创测试机构",
          creationTime: "2019-03-12",
          sort: "1",
          mark: "无"
        },
        {
          name: "数学",
          color: "orange",
          imgurl: "../../../static/img/baowahead.png",
          classify: "长期",
          subsidiaryOrgan: "威创测试机构",
          creationTime: "2019-03-12",
          sort: "1",
          mark: "无"
        }
      ];
    },
    /**
     * 关闭对话框
     */
    handleClose(done) {
      done();
    },
    /**
     * 搜索课程
     */
    searchCourse() {
      console.log(this.searchText);
      console.log(this.selectIns1);
      console.log(this.selectIns2);
    },
    /**
     * 添加课程
     */
    addCourse() {},
    /**
     * 当选择项发生变化时会触发该事件
     */
    handleSelectionChange(selection) {
      this.selectItem = selection;
      console.log(this.selectItem);
    },
    /**
     * 编辑操作
     */
    editorBtn(row, column, cell, event) {
      let key = column.columnKey;
      let rowdata = row;
      if (key) {
        this.$store.dispatch("cutImageplugin/setcutImageData", null);
        this.boxshow = true;
        //this.boxshow = true;
      }
    },
    /**
     * 是否勾选
     */
    selectradio(obj) {
      let select = $(".selectradio");

      if (this.selectshow) {
        this.selectshow = false;
        select.addClass("check").removeClass("uncheck");
      } else {
        this.selectshow = true;
        select.addClass("uncheck").removeClass("check");
      }
    },
    /**
     * 编辑图片
     */
    editorImage() {
      //  this.$store.dispatch('cutImageplugin/setcutImageData',null)
      this.$store.dispatch("cutImageplugin/showcutImagePanel");
    },
    /**
     * 页码发生改变事件
     */
    changePage() {}
  },
  mounted() {
    this.initData();
  },
  computed: {
    ...mapState({
      imgsrc: state => state.cutImageplugin.cutImage
    })
  }
};
</script>

<style lang="scss">
.subjectpagecontainer {
  margin: 0rem 0.2rem 0rem 0.2rem;
  padding: 0.2rem;
  box-shadow: 0.01rem 0.01rem 0.01rem 0.01rem #efefef;
  background: #ffffff;
  .btn_user_defined {
    background-color: #3598dc !important;
    width: 0.8rem !important;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    color: #ffffff !important;
  }
  .toRight {
    margin-right: 0px !important;
    float: right;
    .btn_add_defined {
      background-color: #3598dc !important;
      color: #ffffff;
    }
    .btn_self_defined_del {
      background: #ff5722;
      color: #ffffff;
    }
  }
  .colorbox {
    width: 0.5rem;
    height: 0.25rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -0.25rem;
    margin-top: -0.125rem;
  }
  .content-box {
    width: 100%;
    height: 4rem;
    margin-top: -0.2rem;
    .licls {
      width: 100%;
      height: 0.7rem;
      background: #ffffff;
      margin-top: 0.1rem;
      .three-input {
        float: left;
        width: 33.3%;
        height: 0.7rem;
        padding: 0.1rem;
        text-align: center;
        .selectradio {
          width: 16px;
          height: 16px;
          float: left;
          margin-left: 0.3rem;
          margin-top: 0.15rem;
        }
        .uncheck {
          background-image: url(../../assets/img/system_set/icon_unchecked.png);
        }
        .check {
          background-image: url(../../assets/img/system_set/icon_checked.png);
        }
        .selectdescrib {
          float: left;
          width: 1rem;
          text-align: left;
        }
        .inputbox {
          width: 100%;
          height: 100%;
          font-size: 0.15rem;
          padding: 0px !important;
          border-top: none;
          border-bottom: 1px solid #dedede;
          border-right: none;
          border-left: none;
          outline: none;
          font-size: 0.15rem;
          padding: 0px !important ;
        }
        .input-container {
          font-size: 0.1rem;
          height: 0.2rem;
          line-height: 0.2rem;
          width: 100%;
          .input-text {
            width: 33.3%;
            height: 100%;
            float: left;
            input {
              width: 100%;
              height: 100%;
              font-size: 0.15rem;
              padding: 0px !important;
              border-top: none;
              border-bottom: 1px solid #dedede;
              border-right: none;
              border-left: none;
              outline: none;
              font-size: 0.15rem;
              padding: 0px !important ;
            }
          }
        }
      }
    }
    .licls:nth-child(3) {
      height: 2rem;
      .summary {
        width: 100%;
        height: 0.5rem;
        padding: 0.1rem;
        .inputbox {
          width: 100%;
          height: 100%;
          font-size: 0.15rem;
          padding: 0px !important;
          border-top: none;
          border-bottom: 1px solid #dedede;
          border-right: none;
          border-left: none;
          outline: none;
          font-size: 0.15rem;
          padding: 0px !important ;
        }
      }
      .imgcontainer {
        width: 1.2rem;
        height: 1.2rem;
        padding: 0.1rem;
        .imgtext {
          width: 100%;
          height: 0.2rem;
          float: left;
          line-height: 0.2rem;
        }
        .imgcontent {
          width: 100%;
          height: 1rem;
          border: 1px solid #dedede;
          float: left;
          img {
            height: 1rem;
          }
        }
      }
    }
  }
  .el-dialog-bg {
    background: #f4f5f6;
  }
}
</style>